<!--
 * @Description: 
 * @version: 
 * @Author: 171
 * @Date: 2022-09-08 16:32:05
 * @LastEditors: 171
 * @LastEditTime: 2022-09-19 18:50:33
-->
<script setup lang='ts'>

  import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { getMyApiArticle } from "../../server";
  import { useThrottle } from "../../hooks/throttle"
  

  const container = ref(null);
  const articleList: any = reactive([]);
  const isAll = ref(false); // 判断是否全部加载完毕
  let articlePage = 1;
  let requestNumber = 5; // 一次请求的文章数

  const router = useRouter();

  const watchScroll = (e: any) => { // 用于监听滚动条
    const { scrollTop, scrollHeight, clientHeight } = e.target
    if (clientHeight + scrollTop + 20 >= scrollHeight ) {
      getArticle();
    }
  }

  const throttleScroll = useThrottle(watchScroll, 1000);

  const getArticle = () => {
    
    getMyApiArticle(articlePage++, requestNumber, (items: any) => {
      if(items){
        articleList.push(...items);
      }
      if(!items || articleList.length % requestNumber !== 0){
        const element: any = container.value;
        element.removeEventListener('scroll', throttleScroll)
        isAll.value = true;
        ElMessage({
          message: '没有更多啦',
          type: 'info',
          duration: 1500
        });
      }       
    });
  }
  
  onMounted(()=>{
    const element: any = container.value;
    //绑定事件
    element.addEventListener('scroll', throttleScroll)
    getArticle(); // 初始化，先获得若干份数据作为初始的展示项
  })
  const backTop = () => {
    const element: any = container.value;
    element.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }

  const goToDetail = (item: any) => {
    const {id, content, title, description, publishTime} = item;
    router.push({
      name: 'talk-detail',
      state: {id, content, title, description, publishTime}
    })
  }
  
  onBeforeUnmount(() => {
    const element: any = container.value;
    // 解绑事件
    element.removeEventListener('scroll', throttleScroll)
  })

</script>

<script lang='ts'>
  export default {
    name: "talk-list"
  }
  
</script>

<template>
  
  
  <router-link to="/talk/editor">
    <el-tooltip content="添加新的文章" placement="right">
      <div class="btn editor animate__animated animate__bounce animate__infinite animate__slower">
        <el-icon :size="20"><Tickets /></el-icon>
      </div>
    </el-tooltip>
  </router-link>
  
  <el-tooltip content="返回顶部" placement="right">
    <div class="btn top animate__animated animate__pulse animate__infinite animate__slower"
      @click="backTop"
    >
      <el-icon :size="15"><Top /></el-icon>
    </div>
  </el-tooltip>
  
  <div class="container" ref="container">
    <div v-if="articleList.length === 0"><el-empty  description="nothing" /></div>
    <transition-group enter-active-class="animate__animated animate__slideInLeft">
      <div class="article" v-for="item in articleList" :key="item.id" @click="goToDetail(item)">
        <div class="title">{{item.title}}</div>
        <div class="content">
          {{item.description}}
        </div>
        <div class="info">
          发布时间：{{item.publishTime.slice(0, 10)}}
        </div>
        <hr v-if="!isAll || item !== articleList[articleList.length - 1]" style="margin: 25px 0 25px 0">
      </div>
    </transition-group>
    <!-- 考虑到不同的屏幕高度可能会导致不触发滚动刷新，需要添加一个手动的刷新键 -->
    <div class="load" v-if="!isAll && articleList.length !== 0" @click="getArticle">
      <el-icon><RefreshLeft /></el-icon>点击加载更多
    </div>
  </div>
  
</template>

<style scoped lang='less'>
  .btn{
    width: 45px;
    height: 45px;  
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .editor{
    color: #409eff;
    right: 10%;
    bottom: 20%;
  }
  .top{
    right: 10%;
    bottom: 10%;
    color: #43b883;
  }

  .container{
    width: 70%;
    margin: 0 auto;
    margin-top: 60px;
    background-color: rgba(255, 255, 255, 0.98);
    height: calc(98% - 60px);
    color: #000;
    overflow-y: auto;
    padding: 25px 0 25px 0;
    border-radius: 5px;
    box-shadow: #fff 0 0 15px 0px ;//边框阴影;
    .article{
      box-sizing: border-box;
      padding: 0 25px 0 25px;
      cursor: pointer;
      &:hover{
        .title{
          color: #37c585;
        }
      }
      .title{
        font-size: 20px;
        transition: all 0.3s;
      }
    } 
    .content{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 14px;
      margin-top: 10px;
      color: #79797b;
    }
    .info{
      color: #a6a6a6;
      font-size: 13px;
      margin-top: 10px;
    }
    .load{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #aaaaaa;
      font-size: 14px;
      cursor: pointer;
    }
  }
</style>